<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/search.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax_fn.js"></script>
    <script src="../js/request.js"></script>
</head>

<body>
    <div class="tips">
        <a href="./register.html">注册</a>
        <a href="./login.html">登录</a>
    </div>
    <div class="wrapAll w">
        <form class="search_bar" onsubmit="return false">
            <div class="searchBox">
                <input type="text" class="searchCon">
                <button class="searchBtn">搜索</button>
            </div>
            <div class="orderBox">
                <!-- 排序的列(column)名 (id,chinese,math,english,total) -->
                <div class="orderColBox">
                    <label>
                        学号
                        <input type="radio" checked name="orderCol" class="orderCol" value="id">
                    </label>
                    <label>
                        语文
                        <input type="radio" name="orderCol" class="orderCol" value="chinese">
                    </label>
                    <label>
                        数学
                        <input type="radio" name="orderCol" class="orderCol" value="math">
                    </label>
                    <label>
                        英语
                        <input type="radio" name="orderCol" class="orderCol" value="english">
                    </label>
                    <label>
                        总分
                        <input type="radio" name="orderCol" class="orderCol" value="total">
                    </label>
                </div>

                <!-- 排序的类型  升序 / 降序 -->
                <div class="orderTypeBox">
                    <label>
                        升序
                        <input type="radio" checked name="orderType" class="orderType" value="asc">
                    </label>
                    <label>
                        降序
                        <input type="radio" name="orderType" class="orderType" value="desc">
                    </label>
                </div>

                <div class="showNumBox">
                    <select class="select">
                        <option value="5" selected>每页显示05条</option>
                        <option value="10">每页显示10条</option>
                        <option value="15">每页显示15条</option>
                        <option value="20">每页显示20条</option>
                    </select>
                </div>
                <input type="reset" class="resetBtn" value="重置">
            </div>
        </form>
        <div class="wrapTable">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>总分</th>
                        <th>编辑</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <div class="pageBox">
            <button class="prev">上一页</button>
            <span class="pageTips">1/10</span>
            <button class="next">下一页</button>
        </div>
    </div>

    <div class="shadow">
        <form class="detail" action="" autocomplete="off" onsubmit="return false">
            <p><label>编号:<input type="text" name="id" disabled></label></p>
            <p><label>姓名:<input type="text" name="name" disabled></label></p>
            <p><label>班级:<input type="text" name="class" disabled></label></p>
            <p><label>语文:<input type="text" name="chinese"></label></p>
            <p><label>数学:<input type="text" name="math"></label></p>
            <p><label>英语:<input type="text" name="english"></label></p>
            <p><button class="subBtn">确定</button><button class="canBtn">取消</button></p>
        </form>
    </div>

</body>
<script>

    var tips = document.getElementsByClassName("tips")[0];
    var tbody = document.querySelector(".wrapTable tbody");
    var editList = document.getElementsByClassName("edit");
    var shadow = document.getElementsByClassName("shadow")[0];
    var detailForm = document.getElementsByClassName("detail")[0];
    var subBtn = document.getElementsByClassName("subBtn")[0];
    var canBtn = document.getElementsByClassName("canBtn")[0];
    var select = document.getElementsByClassName("select")[0];
    var orderTypeList = document.getElementsByClassName("orderType");
    var orderColList = document.getElementsByClassName("orderCol");

    var searchCon = document.getElementsByClassName("searchCon")[0];
    var searchBtn = document.getElementsByClassName("searchBtn")[0];
    var resetBtn = document.getElementsByClassName("resetBtn")[0];

    var pageTips = document.getElementsByClassName("pageTips")[0];
    var prev = document.getElementsByClassName("prev")[0];
    var next = document.getElementsByClassName("next")[0];
    console.log(orderColList);

    var key = "";          // 设置 默认 搜索关键词""  =>  查询所有数据
    var orderCol = "id";    // 设置 默认 排序列名   => 按 id 排序
    var orderType = "asc";  // 设置 默认 排序方式   => 降序 排序
    var showNum = 5;            // 设置 默认 显示函数   => 显示5行
    var pageIndex = 1;      // 设置 默认 显示第一页

    // 后端分页  =>  借助sql语法    limit m,n  跳过m，条显示n条
    // 第1页 ： limit 0,5
    // 第2页 ： limit 5,5
    // ...
    // pageIndex =>  limit (pageIndex - 1)*showNum



    // 如果有lgc => 就显示欢迎,xxx 
    var cookie = document.cookie;
    if (cookie) {
        var lgc = getCookie("lgc");
        if (lgc) {
            tips.innerHTML = `欢迎,${lgc} <button onclick = "exit();">退出</button>`;
        }
    }
    setData();

    // 点击重置按钮时
    resetBtn.onclick = function () {
        key = "";
        orderCol = "id";
        orderType = "asc";
        showNum = 5;
        pageIndex = 1;
        setData();
    }
    // 排序列名选择
    for (let i = 0; i < orderColList.length; i++) {
        let orderOne = orderColList[i];
        orderOne.onclick = function () {
            orderCol = orderOne.value;
            setData();
        }
    }

    // 关键词搜索
    searchBtn.onclick = function () {
        key = searchCon.value.trim();
        if (key) {
            setData();
        } else {
            tbody.innerHTML = `<tr> <td colspan = "9">暂无数据</td></tr>`
        }
    }
    // 升序、降序选择
    for (let i = 0; i < orderTypeList.length; i++) {
        let orderOne = orderTypeList[i];
        orderOne.onclick = function () {
            orderType = orderOne.value;
            setData();
        }
    }

    // 显示行数
    select.onchange = function () {
        showNum = this.value;
        setData();
    }

    // 点击 编辑或删除时
    tbody.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || window.srcElement;

        if (target.className == "edit") {
            shadow.style.display = "block";

            // 编辑数据
            var tr = target.parentElement.parentElement;
            var id = tr.getAttribute("data-id");        // 查找需要编辑的id
            $.ajax({
                type: "get",
                url: "../php/searchGradeById.php",
                data: { id },
                dataType: "json",
                success(result) {
                    var { status, msg, data: { id, name, class: _class, chinese, math, english } } = result;
                    if (status) {
                        console.log(id, name, _class, chinese, math, english);
                        // 将数据渲染到页面
                        detailForm.id.value = id;
                        detailForm.name.value = name;
                        detailForm.class.value = _class;
                        detailForm.chinese.value = chinese;
                        detailForm.math.value = math;
                        detailForm.english.value = english;
                    } else {
                        alert(msg);
                    }
                }
            })
        } else if (target.className == "del") {

            // 删除数据 
            if (confirm("确认删除该条数据吗？")) {
                var tr = target.parentElement.parentElement;
                var id = tr.getAttribute("data-id");        // 查找需要删除的id
                // 请求数据并删除   
                deleteGradeById({ ids: id }).then(({ status, msg }) => {
                    if (status) {
                        tr.remove();
                        setData();
                    } else {
                        alert(msg);
                    }
                }).catch((err) => {
                    throw err;
                })
            }
        }
    }

    // 编辑  确定时
    subBtn.onclick = function () {

        // 获取更改后的数据
        var id = detailForm.id.value;
        var chinese = detailForm.chinese.value;
        var math = detailForm.math.value;
        var english = detailForm.english.value;

        if (id && chinese && math && english) {
            updateGradeById({ id, chinese, math, english }).then(({ status, msg }) => {
                if (status) {
                    shadow.style.display = "none";
                    setData();
                } else {
                    alert(msg);
                }
            }).catch((err) => {
                throw err;
            });
        } else {
            alert("请输入完整数据")
        }


    }
    // 编辑  取消时
    canBtn.onclick = function () {
        shadow.style.display = "none";
    }

    // 判断 Chinese 输入数据
    detailForm.chinese.onblur = function () {
        var chinese = detailForm.chinese.value;
        if (chinese > 100 || chinese < 0) {
            detailForm.chinese.value = "";
        }
    }
    // 判断 math 输入数据
    detailForm.math.onblur = function () {
        var math = detailForm.math.value;
        if (math > 100 || math < 0) {
            detailForm.math.value = "";
        }
    }
    // 判断 english 输入数据
    detailForm.english.onblur = function () {
        var english = detailForm.english.value;
        if (english > 100 || english < 0) {
            detailForm.english.value = "";
        }
    }





    function setData() {
        $.ajax({
            type: "get",
            url: "../php/searchAllGradeLimit.php",
            data: {
                key,
                showNum,
                pageIndex,
                orderCol,
                orderType
            },
            dataType: "json",
            success(data) {
                var { list, count, maxPage } = data;
                var html = "";
                pageIndex = pageIndex > maxPage ? maxPage : pageIndex;    // 设置页码变化 
                pageTips.textContent = `${pageIndex}/${maxPage}`;        // 显示页码
                list.forEach(({ id, name, class: _class, chinese, math, english, total }) => {
                    html += `<tr data-id = "${id}">
                            <td>${id}</td>
                            <td>${name}</td>
                            <td>${_class}</td>
                            <td>${chinese}</td>
                            <td>${math}</td>
                            <td>${english}</td>
                            <td>${total}</td>
                            <td><a href = "javascript:;" class = "edit">编辑</a></td>
                            <td><a href = "javascript:;" class = "del">删除</a></td>
                        </tr>`  ;
                });
                tbody.innerHTML = html;
                prev.onclick = function () {
                    if (pageIndex <= 1) {
                        return false;
                    }
                    pageIndex--;
                    setData();
                }
                next.onclick = function () {
                    if (pageIndex >= maxPage) {
                        return false;
                    }
                    pageIndex++;
                    setData();
                }
            }
        });
    }

    function exit() {
        // setCookie("lgc", "", -1);
        delCookie("lgc");
        location.reload();
    }





</script>

</html>